<template>
    <div class="about">
        <h1>This is an about page</h1>
        <button @click="Incremental(10)">递增</button>
        <button @click="Decreasing(10)">递减</button>
        <h2>num:{{num}}</h2>
        <h3>arr:{{abc}}</h3>
    </div>
</template>
<script>
    //mapState 是获取state的  mapMutations是获取mutations的
    import {mapState, mapMutations, mapActions,mapGetters} from 'vuex'

    export default {
        name: 'About',
        data() {
            return {}
        },
        methods: {
            // increase(){
            //   this.$store.commit('Incremental',1)
            // },

            // ...mapMutations({
            //   Incremental:'Incremental'
            // }),

            ...mapMutations(['Incremental']),

            // Decreasing(){
            //   this.$store.dispatch('Decreasing',10)
            // },

            // ...mapActions({
            //     Decreasing:'Decreasing'
            // })

            ...mapActions(['Decreasing']),
        },
        // computed: {
        //     num() {
        //         return this.$store.state.num  1
        //     }
        // }

        // computed:mapState({
        //     num: state=> state.num   2
        // })

        // computed:mapState(['num'])  3

        computed: {
            ...mapState(['num']),  // 4
           /* arr() {
                // return this.$store.state.arr
                let ary = [];
                let are = this.$store.state.arr;
                for (let i = 0; i < are.length; i++) {
                    if (are[i] >= 30) {
                        ary.push(are[i])
                    }

                }
                return ary;
            },*/
            /*abc(){
                return this.$store.state.arr.filter((item)=> item > 30);

            }*/
            /*abc(){
               return  this.$store.getters.finName;
           }*/
            ...mapGetters({
                abc:'finName'
            })
        },


    }
</script>
